<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>校园电单车信息管理系统</title>
    <link rel="shortcut icon" href="images/favicontop.png" />

    <!-- 引入viewUI start -->
    <link
      rel="stylesheet"
      type="text/css"
      href="http://unpkg.com/view-design/dist/styles/iview.css"
    />

    <!-- 引入viewUI end -->

    <!-- 自身css -->
    <link rel="stylesheet" href="css/home.css" />
    <!-- 自定义icon -->
    <link rel="stylesheet" href="iconfont/iconfont.css" />
    <!-- 子页面css -->
    <link rel="stylesheet" href="css/dataMap.css" />
    <!-- 加载动效css -->
    <link rel="stylesheet" href="css/loader.css" />

    <script>
      if (sessionStorage.getItem("username") == null) {
        window.location.href = "login.html";
      }
    </script>

    <style>
      .disabledClass {
        pointer-events: none;
      }

      .ivu-input[disabled],
      fieldset[disabled] .ivu-input {
        color: black;
      }
      /* .ivu-menu-light {
            background: black;
        } */
      /* .layout /deep/ .ivu-menu-light {
        background: #ccc;
        } */

      .menu-item span {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: width 0.2s ease 0.2s;
      }

      .menu-item i {
        transform: translateX(0px);
        transition: font-size 0.2s ease, transform 0.2s ease;
        font-size: 16px;
      }

      .collapsed-menu span {
        width: 0px;
        transition: width 0.2s ease;
      }

      .collapsed-menu i {
        transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
        font-size: 22px;
      }

      .dev-run-preview .dev-run-preview-edit {
        display: none;
      }

      .imgScale {
        transform: scaleX(-1);
      }

      .hide {
        display: none;
      }
    </style>
  </head>

  <body>
    <!-- jQuery的CDN引入 -->
    <script src="js/jquery.js"></script>
    <!-- 微信小程序云环境包 -->
    <script src="js/cloud.js"></script>

    <!-- 本地引入echarts -->
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/iview.js"></script>
    <div id="home" class="layout" style="position: fixed; width: 100%">
      <Layout>
        <header>
          <!-- navTo用于导航页面之间的跳转 -->
          <!-- @on-select获取点击是二级菜单传入的name -->
          <i-menu
            mode="horizontal"
            theme="light"
            active-name="index.html"
            @on-select="navTo"
            ref="topMenu"
          >
            <div class="layout-logo" @click="collapsedSider">
              <img
                style="height: 200%; width: 200%; margin: 0 auto 5px"
                :class="imgScale"
                src="images/favicon.png"
              />
            </div>

            <div class="layout-nav">
              <menu-item name="index.html">
                <i class="ivu-icon ivu-icon-md-list-box"></i>信息管理
              </menu-item>
              <menu-item
                name="showUsers.html"
                id="getHtml"
                @click="getAuthority"
              >
                <i class="ivu-icon iconfont icon-chengyuanweihu"></i> 账户管理
              </menu-item>
              <!-- <i-button @click="getAuthority">测试</i-button> -->
              <Dropdown @on-click="mine" style="margin-left: 20px">
                <!-- :里需要是表达式，因为css算是配置项，所以传入对象 -->
                <Avatar
                  :style="{background: color[Math.floor(Math.random()*4)]}"
                  >{{username}}</Avatar
                >
                <dropdown-menu slot="list">
                  <dropdown-item name="退出" style="text-align: center"
                    >退出</dropdown-item
                  >
                </dropdown-menu>
              </Dropdown>
            </div>
          </i-menu>
        </header>
        <!-- 侧边栏 -->
        <Layout style="height: 900px; margin-top: -4px">
          <Sider
            ref="side1"
            hide-trigger
            collapsible
            :collapsed-width="78"
            on-collapse="collapseChange"
            v-model="isCollapsed"
            :class="menuitemClasses"
            :style="{background: '#515a6e',height:'100%','position':'relative'}"
          >
            <i-menu
              @on-select="contentTo"
              active-name="dataMap.html"
              theme="dark"
              width="auto"
              :open-names="['1']"
              :accordion="true"
            >
              <menu-item name="dataMap.html">
                <i class="ivu-icon ivu-icon-md-stats"></i> <span>综合概览</span>
              </menu-item>
              <Submenu name="待办事项">
                <template slot="title">
                  <i class="ivu-icon ivu-icon-md-paper"></i
                  ><span>待办事项</span>
                </template>
                <menu-item name="audit.html" @on-select="contentTo"
                  ><i class="ivu-icon ivu-icon-logo-octocat"></i
                  ><span>车主信息审核</span></menu-item
                >
                <menu-item name="print.html" @on-select="contentTo">
                  <i class="ivu-icon ivu-icon-md-card"></i
                  ><span>颁发校园骑行证</span>
                </menu-item>
              </Submenu>
              <Submenu name="车主信息">
                <template slot="title">
                  <i class="ivu-icon ivu-icon-md-body"></i><span>车主信息</span>
                </template>
                <menu-item name="qualification.html" @on-select="contentTo"
                  ><i class="ivu-icon ivu-icon-md-checkmark"></i
                  ><span>审核合格区</span></menu-item
                >
                <menu-item name="disqualification.html" @on-select="contentTo"
                  ><i class="ivu-icon ivu-icon-md-close"></i
                  ><span>审核失败区</span></menu-item
                >
              </Submenu>
              <menu-item name="getOutOfLine.html" @on-select="contentTo">
                <i class="ivu-icon ivu-icon-md-bonfire"></i>
                <span>违规记录</span>
              </menu-item>
              <menu-item name="chargeManagement.html" @on-select="contentTo">
                <i class="ivu-icon ivu-icon-ios-flash"></i>
                <span>充电管理</span>
              </menu-item>
              <menu-item name="institution.html" @on-select="contentTo">
                <i class="ivu-icon ivu-icon-md-bookmarks"></i>
                <span>制度与政策</span>
              </menu-item>
            </i-menu>

            <img
              v-if="!isCollapsed"
              style="
                z-index: 103;
                width: 137%;
                height: auto;
                transform: scaleX(-1);
                position: absolute;
                bottom: 200px;
                left: -33px;
              "
              :src="siderIllustrations[contentName]"
              alt="无法显示"
            />
          </Sider>
          <Layout style="background: #fff">
            <!-- 内容切换页 -->
            <content id="content"> </content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  </body>
</html>
<script>
  new Vue({
    el: "#home",
    data: {
      username: sessionStorage.getItem("username"),
      color: ["#ffa3b2", "#ffcff9", "#52dbaf", "#fec262"],
      contentName: "dataMap.html",
      // 跳转前判断的data
      phone: sessionStorage.getItem("phone"),
      // whichHtml: ''
      siderIllustrations: {
        "dataMap.html": "images/bubble-gum-financial-statistics.gif",
        "dataMap.html":
          "images/bubble-gum-woman-and-man-interact-with-charts-and-work-as-a-team.png",
        "audit.html":
          "images/bubble-gum-recruiter-with-a-magnifying-glass-is-looking-for-new-employees-online.png",
        "print.html":
          "images/bubble-gum-sitting-woman-has-a-chat-with-her-boss-on-computer.png",
        "qualification.html": "images/bubble-gum-done.png",
        "disqualification.html": "images/bubble-gum-sad-mans-head.png",
        "getOutOfLine.html":
          "images/bubble-gum-man-looks-at-the-gears-and-decides-the-question.png",
        "chargeManagement.html":
          "images/bubble-gum-man-holds-a-broken-sparkling-wire.png",
        "institution.html":
          "images/bubble-gum-woman-runs-with-big-pile-of-documents.png",
      },
      //起始展开sider
      isCollapsed: false,
    },
    methods: {
      //上边
      navTo(name) {
        if (name == "showUsers.html") {
          this.getAuthority();
        } else {
          window.location.href = name;
        }
      },
      //左边
      contentTo(name) {
        this.contentName = name;
      },
      mine(name) {
        if ((name = "退出")) {
          sessionStorage.removeItem("username");
          sessionStorage.removeItem("phone");
          window.location = "login.html";
        }
      },
      //收起与展开侧边栏
      collapsedSider() {
        // toggleCollapse改变Sider展开-收起状态。
        this.$refs.side1.toggleCollapse();
      },

      // 是否允许进入管理权限
      getAuthority() {
        var that = this;
        $.ajax({
          url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/adminCheck",
          type: "POST",
          data: {
            phone: sessionStorage.getItem("phone"),
          },
          // 发送请求成功
          success(res) {
            if (res.error_code == 0) {
              // that.whichHtml = "showUsers.html";
              // console.log(that.$refs["getHtml"]);
              // that.$refs["getHtml"].css({"pointer-events": "none"});
              // 禁止未设置成功
              // $(".layout-nav #getHtml").css({"pointer-events":"none"});
              // console.log(that.whichHtml);
              // $(".layout-nav a").addClass("disabledClass");

              // 原生js跳转语句
              window.location.href = "showUsers.html";
            } else if (res.error_code == 1) {
              that.whichHtml = "index.html";
              // console.log(sessionStorage.getItem("phone"));
              that.$Notice.error({
                title: "您无权访问此页面",
              });
              that.$refs.topMenu.currentActiveName = "index.html";
            } else if (res.error_code == 2) {
              that.whichHtml = "index.html";
              that.$Notice.warning({
                title: res.msg,
              });
            }
          },
          error(res) {
            console.log("请求发送失败！");
          },
        });
      },
    },
    computed: {
      menuitemClasses: function () {
        return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
      },
      imgScale: function () {
        return [this.isCollapsed ? "" : "imgScale"];
      },
    },
    // watch 监测数据
    watch: {
      contentName: {
        /*immediate: true;使页面一加载就先出现handler函数以监测（一般是先看数据再监测，
                但是这个用于切换，即点击新页面，就会传来newName然后用ajax请求跳转页面，如果一开始没有
                就先出来这个函数监测，那么点击了某个页面后就不能一开始就跳转）*/
        immediate: true,
        handler(newName) {
          console.log("局部页面切换，现为" + newName);
          // 获取请求页面
          var url = newName;
          $.ajax({
            type: "get",
            dataType: "html",
            url: url,
            success: function (res) {
              // 添加页面内容
              $("#content").html(res);
              // 将获取的html放到内容切换页(id="content")(105行左右)展示
            },
          });
        },
      },

      //用于折叠侧边菜单时隐藏箭头
      isCollapsed: {
        handler(newValue) {
          console.log(newValue);
          if (newValue) {
            $(".ivu-menu-submenu-title-icon").addClass("hide");
          } else {
            $(".ivu-menu-submenu-title-icon").removeClass("hide");
          }
        },
      },
    },

    mounted: function () {
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
      ) {
        console.log("移动设备端访问。");
        window.location.href = "nonsupport.html";
      } else {
        console.log("pc电脑端访问。");
      }
    },
  });
</script>
